'use client'

import { Link } from '@/src/navigation'
import Image from 'next/image'
import { useRef } from 'react'
import { useScroll } from 'react-use'
import Product from './product'

import arrowIcon from '@/public/arrow_right_white.png'
import cheveronLeftGrayIcon from '@/public/home_cheveron_left_gray.png'
import cheveronRightGrayIcon from '@/public/home_cheveron_right_gray.png'
import cheveronLeftGreenIcon from '@/public/home_cheveron_left_green.png'
import cheveronRightGreenIcon from '@/public/home_cheveron_right_green.png'

interface ScrollContainerProps {
  products: Product[]
  m: {
    discoverMore: string
    exploreMore: string
  }
  key: string
}

const ScrollContainer: React.FC<ScrollContainerProps> = (props) => {
  const { products, m, key } = props

  // 滚动容器 ref
  const scrollRef = useRef<HTMLDivElement>(null)
  // 滚动元素 ref
  const elementRef = useRef<HTMLDivElement>(null)
  // 横向滚动距离
  const { x } = useScroll(scrollRef)

  // 是否已经滚动到最左边
  const isScrolledLeft = x === 0
  // 是否已经滚动到最右边
  const isScrolledRight =
    x + scrollRef.current?.clientWidth! >= scrollRef.current?.scrollWidth!

  /**
   * @description 点击翻页按钮时触发
   *
   * @param direction - 翻页方向
   */
  const handleClickPaginator = (direction: 'prev' | 'next') => {
    if (direction === 'prev') {
      scrollRef.current!.scrollLeft! -=
        (elementRef.current?.clientWidth || 0) + 16
    } else {
      scrollRef.current!.scrollLeft! += elementRef.current?.clientWidth || +16
    }
  }

  return (
    <>
      <div
        key={key}
        ref={scrollRef}
        className='flex items-center px-[0.9375rem] lg:px-homeScrollPaddingLg 2xl:px-homeScrollPadding2xl lg:mx-auto space-x-3 lg:space-x-4 overflow-scroll scroll-smooth'
      >
        {products.map((item, index) => {
          return (
            <Product
              key={item.id}
              id={item.id.toString()}
              myRef={index === 0 ? elementRef : undefined}
              picture={item.image}
              name={item.new_title}
              desc={item.con}
              m={{ exploreMore: m.exploreMore }}
            />
          )
        })}
      </div>
      <div className='h-[1.40625rem] lg:h-[2.5rem] 2xl:h-[3.75rem]' />
      {/* 按钮 */}
      <div className='flex justify-between items-center px-[0.9375rem] lg:px-0 lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px]'>
        {/* 发现更多按钮 */}
        <Link
          href='/products'
          className='flex justify-center items-center px-[0.9375rem] py-[0.8125rem] bg-black lg:px-[1.6875rem] lg:py-[1.0625rem] hover:bg-gray-700 transition-colors duration-200'
        >
          <div className='text-white text-[0.875rem] leading-[0.875rem] font-medium lg:text-[1rem] lg:leading-[1rem]'>
            {m.discoverMore}
          </div>
          <div className='w-[0.59375rem] lg:w-[1rem]' />
          <div className='relative w-[0.59375rem] h-[0.53125rem] lg:w-[0.8125rem] lg:h-[0.6875rem]'>
            <Image
              src={arrowIcon}
              alt='the icon of discover button'
              fill
              sizes='0.59375rem'
            />
          </div>
        </Link>
        {/* 翻页按钮 */}
        <div className='flex items-center space-x-[0.5625rem] lg:space-x-[0.75rem]'>
          <button
            className={`relative w-[2.25rem] h-[2.25rem] lg:w-[3rem] lg:h-[3rem] ${
              x === 0 ? 'bg-[#EFEFEF]' : 'bg-black'
            }`}
            onClick={() => handleClickPaginator('prev')}
          >
            {isScrolledLeft && (
              <Image
                src={cheveronLeftGrayIcon}
                alt='cheveron icon'
                fill
                sizes='(max-width: 1024px) 2.25rem, 3rem'
              />
            )}
            {!isScrolledLeft && (
              <Image
                src={cheveronLeftGreenIcon}
                alt='cheveron icon'
                fill
                sizes='(max-width: 1024px) 2.25rem, 3rem'
              />
            )}
          </button>
          <button
            className={`relative w-[2.25rem] h-[2.25rem] lg:w-[3rem] lg:h-[3rem] ${
              isScrolledRight ? 'bg-[#EFEFEF]' : 'bg-black'
            }`}
            onClick={() => handleClickPaginator('next')}
          >
            {isScrolledRight && (
              <Image src={cheveronRightGrayIcon} alt='cheveron icon' fill />
            )}
            {!isScrolledRight && (
              <Image
                src={cheveronRightGreenIcon}
                alt='cheveron icon'
                fill
                sizes='(max-width: 1024px) 2.25rem, 3rem'
              />
            )}
          </button>
        </div>
      </div>
    </>
  )
}

export default ScrollContainer
